<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/view.css}"/>
    <link th:href="@{/css/bs.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">
    <title>用户充值中心</title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <form id="userForm" class="layui-form layui-card-body">
                  <input type="hidden" name="id" th:value="${user.id}">
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 150px;">请输入银行卡：</label>
                      <input type="text" name="banknum" placeholder="请输入真实姓名绑定的银行卡" required  lay-verify="banknum" autocomplete="off" class="layui-input" style="width: 200px;">
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 150px;">请选择银行：</label>
                      <div class="position-rel">
                          <div class="position-rel" >
                              <input class="form-control" id="chose_input"  type="text" placeholder="--储蓄卡--" style="width:300px;">
                              <div class="bank_xljt" style="margin-left: 406px;"><img width="40" class="jt_xz" alt=""  th:src="@{/images/jtx.png}"></div>
                              <div class="bank_xljt1" id="chose_bank"></div>
                          </div>
                          <div class="bank_xl" style="display: none">
                              <ul>

                                  <li class="hotBank-list">
                                      <a title="中国农业银行" class="hotBank-list-ico " href="javascript:">
                                          <img width="150" alt="" th:src="@{/images/zs1.png}">
                                      </a>
                                  </li>
                                  <li class="hotBank-list">
                                      <a title="中国建设银行" class="hotBank-list-ico " href="javascript:">
                                          <img width="150" alt="" th:src="@{/images/zs2.png}">
                                      </a>
                                  </li>
                                  <li class="hotBank-list">
                                      <a title="中国工商银行" class="hotBank-list-ico " href="javascript:">
                                          <img width="150" alt="" th:src="@{/images/zs3.png}">
                                      </a>
                                  </li>
                                  <li class="hotBank-list">
                                      <a title="中国银行" class="hotBank-list-ico " href="javascript:">
                                          <img width="150" alt="" th:src="@{/images/zs4.png}">
                                      </a>
                                  </li>
                                  <li class="hotBank-list">
                                      <a title="中国光大银行" class="hotBank-list-ico " href="javascript:">
                                          <img width="150" alt="" th:src="@{/images/zs5.png}">
                                      </a>
                                  </li>
                                  <li class="hotBank-list">
                                      <a title="华夏银行" class="hotBank-list-ico " href="javascript:">
                                          <img width="150" alt="" th:src="@{/images/zs6.png}">
                                      </a>
                                  </li>
                                  <li class="hotBank-list">
                                      <a title="中国民生银行" class="hotBank-list-ico " href="javascript:">
                                          <img width="150" alt="" th:src="@{/images/zs7.png}">
                                      </a>
                                  </li>

                              </ul>
                          </div>
                      </div>
                      <div class="layui-form-item">
                          <label class="layui-form-label" style="width: 150px;">请输入提现金额：</label>
                          <input type="text" name="balance" placeholder="请输入不小于1的提现金额" required  lay-verify="forwardmoney" autocomplete="off" class="layui-input" style="width: 200px;">
                          <span style="font-size: 10px;" th:text="'最大提现金额：'+${user.balance}">最大提现金额xxx：</span>
                      </div>
                  </div>


                  <div class="layui-form-item">
                    <div class="layui-input-block" style="width:300px;margin-left:200px;">
                      <input type="button" class="layui-btn layui-btn-blue" lay-submit lay-filter="save" th:value="发起提现申请"></input>
                      <button type="reset" class="layui-btn layui-btn-primary"  style="margin-left:30px;">重置</button>
                    </div>
                  </div>
                </form>  
            </div>
        </div>
    </div>
    <script type="text/javascript" th:src="@{/css/layui/layui.all.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
        var maxmoney = [[${user.balance}]];
        /*]]>*/
    </script>
    <script type="text/javascript">
        layui.use(['form'], function() {
            var form = layui.form
                , layer = layui.layer;

            //添加验证规则
            form.verify({
                banknum : function (value,item) {
                    if(!new RegExp("^[\\S]{16,19}$").test(value)){
                        return "卡号必须为16到19位借记卡";
                    }
                },
                forwardmoney : function (value,item) {
                    var maxmoney1 = maxmoney;
                    if(value > maxmoney1){
                        return "提现金额不能超过最大提现金额！";
                    }
                    if(value < 1 || value == null){
                        return "提现金额不能为空";
                    }
                }
            });

            //监听提交
            form.on('submit(save)', function(data){
               // var test = parent.location.pathname;
                var data = $("#userForm").serialize();
                $.ajax({
                    url: contextPath + "/userCenter/forwardSubmit",
                    type: "post",
                    data: data,
                    success: function (msg) {
                        layer.msg("提现发起，2小时左右到账",{
                            time:1000
                        },function () {
                            //关闭当前弹出层
                            var index=parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.location.reload();
                        });
                    }
                });
            })
        });


    </script>
    <!--下拉银行卡 s-->
    <script>
        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement('style')
            msViewportStyle.appendChild(
                document.createTextNode(
                    '@-ms-viewport{width:auto!important}'
                )
            )
            document.querySelector('head').appendChild(msViewportStyle)
        }

    </script>
    <script>
        $(function(){

            $(".hotBank-list-ico").bind('click',function(){
                $('#chose_input').val($(this).attr('title'));
                $('.bank_xl').hide();
                $("#chose_bank").parent('div').find('img').addClass('jt_xz');
            });
            $("#chose_bank").click(function(){
                $('.bank_xl').show();
                $("#chose_bank").parent('div').find('img').removeClass('jt_xz');
            });

        })
    </script>
    <!--下拉银行卡 e-->
</body>
</html>